<template>
    <div>
        <h2>message</h2>
        <ul>
            <li v-for="item in list" :key="item.id">
                <!-- 跳转路由并携带params参数, to的字符串写法 -->
                <!-- <router-link :to="`/home/message/detail/${item.id}/${item.title}`">{{item.title}}</router-link> -->
                <!-- 跳转路由并携带params参数, to的对象写法, paramas参数必须用name跳转 -->
                <router-link 
                    :to="{
                        // path:'/home/message/detail',
                        name: 'xiangqing',
                        params: {
                            id: item.id,
                            title: item.title
                        }
                    }"
                >
                    {{item.title}}
                </router-link>

                <button @click="pushShow(item)">push查看</button>
                <button @click="replaceShow(item)">replace查看</button>
                <!-- 跳转路由并携带query参数, to的字符串写法 -->
                <!-- <router-link :to="`/home/message/detail?id=${item.id}&&title=${item.title}`">{{item.title}}</router-link> -->
                <!-- 跳转路由并携带query参数, to的对象写法 -->
                <!-- <router-link 
                    :to="{
                        // path:'/home/message/detail',
                        name: 'xiangqing',
                        query: {
                            id: item.id,
                            title: item.title
                        }
                    }"
                >
                    {{item.title}}
                </router-link> -->
            </li>
        </ul>
        <hr>
        <hr>
        <router-view></router-view>
    </div>
   
</template>

<script>
export default {
    name: 'stuMessage',
    data () {
        return {
            list: [
                {
                    id: '001',
                    title: '消息001'
                },
                {
                    id: '002',
                    title: '消息002'
                },
                {
                    id: '003',
                    title: '消息003'
                },
            ]
        }
    },
    methods: {
        pushShow (item) {
            this.$router.push({
                name: 'xiangqing',
                params: {
                    id: item.id,
                    title: item.title
                }
            })
            console.log(this.$router)
        },
        replaceShow (item) {
            this.$router.replace({
                name: 'xiangqing',
                params: {
                    id: item.id,
                    title: item.title
                }
            })
            console.log(this.$router)
        }
    }
}
</script>

<style>

</style>